<template>
    <div id="student-manage">
        <div class="jx-content">
            <div class="class-mange-search">
                <div class="search-box fl">
                    <el-form :inline="true" :model="Form" class="fl">
                        <el-form-item class="teacher-input">
                            <el-input v-model="Form.info" placeholder="输入学生学号/姓名" maxlength="20"></el-input>
                        </el-form-item>
                    </el-form>
                    <button class="button-style" @click="search">搜 索</button>
                </div>
                <div class="btn-group fr">
                     <a @click="downExcel" style="cursor: pointer;">&nbsp;学生数据下载  <i class="iconfont icon-tubiaozhizuo-"></i></a>
                </div>
                <div class="btn-group fr">
                    <button class="button-style"  @click="ExcelImport">批量导入</button>
                </div>
                <div class="btn-group fr">
                    <button class="button-style"  @click="deleteFn">批量删除</button>
                </div>
                <div class="btn-group fr">
                    <button class="button-style"  @click="addUser(1)" >添 加</button>
                </div>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width='50'> </el-table-column>
                    <el-table-column prop="name" label="学生名称"></el-table-column>
                    <el-table-column prop="userNumber" label="学号" ></el-table-column>
                    <el-table-column prop="sexName" label="性别"></el-table-column>
                    <el-table-column prop="telephoneNumber" label="联系方式"> </el-table-column>
                    <el-table-column prop="email" label="邮箱"> </el-table-column>
                    <el-table-column  label="操作" width='180'>
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="addUser(2, scope.row)">修改</el-button>
                            <el-button type="text" size="small" @click="initCode(scope.row.id)">初始化密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false" :title="dialogUserTitle" :visible.sync="dialogUser" width="580px" @close="closeDialog" >
            <el-form ref="addform" :inline="true"  :model="addform"  :rules="rules" label-width="90px">
                <el-form-item label="学号  :" prop="number" >
                    <el-input v-model="addform.number"  placeholder="请输入学号" @input="getinfo('addform')" :disabled="ModifyDisabled"></el-input>
                </el-form-item>
                <el-form-item label="学生名称 :" prop="name" >
                    <el-input v-model="addform.name" maxlength="10" placeholder="请输入学生名称" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="联系方式 :"  prop="telephone">
                    <el-input v-model="addform.telephone" maxlength="11"  placeholder="请输入联系方式" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="邮箱 :"  prop="email">
                    <el-input v-model="addform.email" maxlength="50" placeholder="请输入邮箱" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="性别 :" prop="sex" style="width:100%;">
                    <el-radio-group v-model="addform.sex" placeholder="请选择性别" :disabled="disables">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="btn-center" style="text-align: center;">
                <button class="button-style" @click="userSave('addform')"  :disabled="saveDisabled">保 存</button>
            </div>
        </el-dialog>

        <!-- 批量导入 -->
        <el-dialog :close-on-click-modal="false"  class="dialog-excel" title="Excel导入" :visible.sync="dialogExcel" width="490px" @close="excelClose">
            <div class="dialog-content">
                <div class="excel-btn-box">
                    <el-button class="button-style">上传Excel<input id="excel-file" type="file" multiple="multiple" auto-complete="off" @change="GetFile"></input></el-button>
                    <!-- <a href="/tes/user/model/download/student"><span>学生信息模板.xls <i class="iconfont icon-tubiaozhizuo-"></i></span></a> -->
                    <a href="/tes/user/model/download/student">学生信息模板.xls <i class="iconfont icon-tubiaozhizuo-"></i></a>
                </div>
                <p v-if="dialogExcelFile">{{ dialogExcelFile }} <i class="iconfont icon-shanchu" @click="ExcelDelete"></i></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="ExcelSave">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :close-on-click-modal="false"  class="dialog-history-tips" title="提示" :visible.sync="dialogHistoryTips" width="580px">
            <div class="dialog-content">
                <div class="content-box">
                    <p v-for="(item, index) in historyTipsInfo" v-if="index < 3">{{ item }}</p>
                    <p v-show="historyTipsInfo.length > 3">......</p>
                </div>
                <div class="content-notation">
                    <!-- 注: 1、继续导入，重复学生从原班级移除。2、不导入，重复学生在原班级保留 。 -->
                    <el-radio v-model="historyImportRadio" label="1">继续导入，重复学生信息。<a style="color:red; font-size: 12px;">( 注:学习记录从原班级删除. )</a></el-radio>
                    <el-radio v-model="historyImportRadio" label="2">不导入。</el-radio>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="HistoryTipUnImport">取消</el-button>
                <el-button class="button-style" @click="HistoryTipImport">确认</el-button>
            </span>
        </el-dialog>
        <el-dialog :close-on-click-modal="false"  class="dialog-history-tips" title="提示" :visible.sync="dialogHistoryTips2" width="580px">
            <div class="dialog-content">
                <div class="content-box">
                    <p v-for="(item, index) in historyTipsInfo2" v-if="index < 3">{{ item }}</p>
                    <p v-show="historyTipsInfo2.length > 3">......</p>
                </div>
                <div class="content-notation">
                    <!-- 注: 1、继续导入，重复学生从原班级移除。2、不导入，重复学生在原班级保留 。 -->
                    <el-radio v-model="historyImportRadio2" label="1">继续导入，重复学生信息。<a style="color:red; font-size: 12px;">( 注:学习记录从原班级删除. )</a></el-radio>
                    <el-radio v-model="historyImportRadio2" label="2">不导入。</el-radio>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="HistoryTipUnImport2">取消</el-button>
                <el-button class="button-style" @click="HistoryTipImport2">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Form:{
                    info: ''
                },

                // 班级ID
                classId: '',

                // 表格信息
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1,
                multipleSelection: [],

                // 添加弹窗
                dialogUser: false,
                studentId: '',
                addOrModify: '',
                dialogUserTitle: '',
                addform: {
                    email: '',
                    name: '',
                    number: '',
                    telephone: '',
                    sex: '1'
                },
                // 表单验证规则
                rules:{
                    name:[
                        { required: true, message: '请输入学生名称', trigger: 'blur' },
                    ],
                    number:[
                        { required: true, message: '请输入学号', trigger: 'blur' },
                    ]
                },
                disables: false,

                // 批量导入
                dialogExcel: false,
                // Excel导入文件名称
                dialogExcelFileName: '',
                dialogExcelFile: '',
                saveDisabled: false,

                // 修改时禁止
                ModifyDisabled: false,
                // 历史导入提示
                dialogHistoryTips: false,
                dialogHistoryTips2: false,
                // 历史提示信息
                historyTipsInfo: [],
                historyTipsInfo2: [],
                // 导入不导入radio
                historyImportRadio: '1',
                historyImportRadio2: '1',
            }
        },
        created () {
            let self = this
            self.classId = self.$route.query.classId
            // 获取学生列表
            self.getList()
        },
        methods: {
            // 获取学生列表
            getList(){
                let self = this
                self.$http.get('/tes/course/class/'+self.classId+'/Natural_student/page?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&userInfo='+self.Form.info).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.content
                        self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //下载
            downExcel(){
                let self = this
                let downloadElement = document.createElement('a');
                downloadElement.style.display = 'none';
                downloadElement.href = '/tes/user/model/download/studentInfo?classId='+this.classId+'&showDataFlag='+true
                // downloadElement.download = fileName; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
            },
            // 添加用户
            addUser(type, scope){
                // type 1.添加 2.修改
                let self = this
                self.addOrModify = type
                if(type == 1){
                    self.dialogUserTitle = '添加学生'
                    self.ModifyDisabled = false
                    self.disables = false
                    self.addform = {
                        email: '',
                        name: '',
                        number: '',
                        telephone: '',
                        sex: '1'
                    }
                    self.dialogUser = true
                }else{
                    self.dialogUserTitle = '修改学生'
                    self.ModifyDisabled = true
                    self.disables = false
                    self.studentId = scope.id
                    self.addform.name = scope.name
                    self.addform.number = scope.userNumber
                    self.addform.telephone = scope.telephoneNumber
                    self.addform.sex = ''+scope.sex+''
                    self.addform.email = scope.email
                    self.dialogUser = true
                }
            },
            // 保存用户
            userSave(addform){
                let self = this
                self.$refs[addform].validate((valid) => {
                    if (valid) {
                        self.saveDisabled = true
                        if(self.addOrModify == 1){
                            self.$http.post('/tes/course/class/'+self.classId+'/natural_student?errorFlag=',{
                                name: self.addform.name,
                                userNumber: self.addform.number,
                                sex: self.addform.sex == 'undefined' ? '' : self.addform.sex,
                                email: self.addform.email,
                                telephoneNumber: self.addform.telephone
                            }).then(response => {
                                let res = response.data
                                if(res.code == '200'){
                                    self.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    })
                                    self.dialogUser = false
                                    self.saveDisabled = false
                                    // 重新渲染列表
                                    self.getList()
                                }else if(res.code == '100105'){
                                    self.saveDisabled = false
                                    self.historyTipsInfo = res.data
                                    // self.dialogUser = false
                                    self.dialogHistoryTips = true
                                }else{
                                    self.saveDisabled = false
                                    self.$message.error(res.message)
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }else{
                            self.$http.put('/tes/user/'+self.studentId+'?identity=2',{
                                name: self.addform.name,
                                telephoneNumber:self.addform.telephone,
                                sex: self.addform.sex == 'undefined' ? '' : self.addform.sex,
                                email: self.addform.email,
                            }).then((response) => {
                                let res = response.data
                                if(res.code == '200') {
                                    self.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                    self.dialogUser = false
                                    self.saveDisabled = false
                                    // 重新渲染列表
                                    self.getList()
                                }else{
                                    self.saveDisabled = false
                                    self.$message.error(res.message)
                                }
                            })
                        }
                    }
                })

            },
            // 重复提示导入
            HistoryTipImport() {
                let self = this

                if(self.historyImportRadio == 1){
                    // 调用保存数据函数
                    self.errorFlag = self.historyImportRadio == 1 ? true : false
                    self.$http.post('/tes/course/class/'+self.classId+'/natural_student?errorFlag=true',{
                        name: self.addform.name,
                        userNumber: self.addform.number,
                        sex: self.addform.sex == 'undefined' ? '' : self.addform.sex,
                        email: self.addform.email,
                        telephoneNumber: self.addform.telephone
                    }).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                            self.dialogUser = false
                            self.saveDisabled = false
                            self.dialogHistoryTips = false
                            // 重新渲染列表
                            self.getList()
                        }else if(res.code == '100105'){
                            self.saveDisabled = false
                            self.historyTipsInfo = res.data
                            self.dialogUser = false
                            self.dialogHistoryTips = true
                        }else{
                            self.saveDisabled = false
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }else{
                    self.dialogHistoryTips = false
                }
            },
            // 重复提示导入
            HistoryTipImport2() {
                let self = this

                if(self.historyImportRadio2 == 1){
                    // 调用保存数据函数
                    self.errorFlag = self.historyImportRadio == 1 ? true : false

                    let formData = new FormData()
                    formData.append('file', self.dialogExcelFileName);

                    self.$http.post('/tes/course/Naclass/'+self.classId+'/student/model-import?errorFlag=true', formData).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '学生导入成功',
                                type: 'success'
                            })
                            self.getList()
                            // 添加数据
                            $('#excel-file').val('')
                            self.dialogExcelFileName = ''
                            self.dialogExcel = false
                            self.dialogHistoryTips2 = false
                        }else if(res.code == '100105'){
                            self.historyTipsInfo2 = res.data
                            self.dialogHistoryTips2 = true
                        }else{
                            self.dialogExcelFileName = ''
                            $('#excel-file').val('')
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }else{
                    self.dialogHistoryTips2 = false
                }
            },
            // 重复提示不导入
            HistoryTipUnImport() {
                let self = this
                // 关闭提示
                self.dialogHistoryTips = false
                // 重置提示信息
                self.historyTipsInfo = []
            },
            // 重复提示不导入
            HistoryTipUnImport2() {
                let self = this
                // 关闭提示
                self.dialogHistoryTips2 = false
                // 重置提示信息
                self.historyTipsInfo2 = []
            },
            // 关闭添加修改学生弹窗
            closeDialog(){
                let self = this
                self.$nextTick(function(){
                    self.$refs.addform.resetFields();
                })
            },

            // 初始化密码
            initCode(id){
                let self = this
                self.$http.put('/tes/user/'+id+'/init-password').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '初始化成功',
                            type: 'success'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 批量删除
            deleteFn(){
                let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的内容',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/tes/course/class/'+self.classId+'/student/batch-natural-delete?errorFlag=',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.currentPage = 1
                            // 重新渲染列表
                            self.getList()
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            },
            // 搜索
            search(){
                let self = this
                self.currentPage = 1
                self.getList()
            },
            // 批量导入
            ExcelImport(){
                let self = this
                self.dialogExcelFile = ''
                self.dialogExcel = true
            },
            // Excel文件上传
            GetFile($event) {
                let self = this
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(fileType != 'xls' && fileType != "xlsx"){
                    self.$message.error('请上传Excel文件!')
                    return
                }
                self.dialogExcelFileName = $event.target.files[0]
                self.dialogExcelFile = $event.target.files[0].name
                $event.target.value = ''
            },
            // Excel文件删除
            ExcelDelete() {
                let self = this
                // 清空数据
                self.dialogExcelFile = ''
                self.dialogExcelFileName = ''
            },
            excelClose(){
                let self = this
                // 清空数据
                self.dialogExcelFileName = ''
                $('#excel-file').val('')
            },
            // Excel保存
            ExcelSave() {
                let self = this
                self.currentPage = 1
                self.pagesize = 10
                if(self.dialogExcelFileName == ''){
                    self.$message.error('请上传Excel文件!')
                    return
                }
                const loading = self.$loading({
                    lock: true,
                    text: '文件上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData()
                    formData.append('file', self.dialogExcelFileName);

                self.$http.post('/tes/course/Naclass/'+self.classId+'/student/model-import?errorFlag=', formData).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        loading.close()
                        self.$message({
                            message: '学生导入成功',
                            type: 'success'
                        })
                        self.getList()
                        // 添加数据
                        // self.tableData = res.data
                        $('#excel-file').val('')
                        self.dialogExcelFileName = ''
                        self.dialogExcel = false
                        // self.totalCount = res.data.length

                    }else if(res.code == '100105'){
                        loading.close()
                        self.historyTipsInfo2 = res.data
                        self.dialogHistoryTips2 = true
                    }else{
                        loading.close()
                        self.dialogExcelFileName = ''
                        self.dialogExcelFile = ''
                        $('#excel-file').val('')
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //全选
			handleSelectionChange(val) {
                let self = this
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
                self.multipleSelection = valArr
            },
            //分页
			handleSizeChange: function (size) {
                let self = this
				self.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                let self = this
                self.currentPage = currentPage
                self.getList()
            },
            //获取班级信息详情
            getinfo(addform){
                let self = this
                self.$http.post("/tes/user/student/info?identity=2",{
                    userNumber:self.addform.number
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(res.data){
                            self.addform.name = res.data.name
                            self.addform.telephone = res.data.telephoneNumber
                            self.addform.email = res.data.email
                            if(typeof(res.data.sex) == undefined){
                                self.addform.sex = 0
                            }else{
                                self.addform.sex = ''+res.data.sex+''
                            }
                            self.$message({
                                message: '自动填充已存在的学生',
                                type: 'warning'
                            })
                            // self.$refs['addform'].clearValidate();
                            self.disables = true

                        }else{
                            self.addform.telephone = ''
                            self.addform.email = ''
                            self.addform.name = ''
                            self.disables = false
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
        }
    }
</script>

<style lang="scss">
    #student-manage{
        .search-box{
            .el-input__inner{
                width: 180px;
            }
        }
        .teacher-input{
            .el-input__inner{
                width: 240px;
            }
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                .el-button {
                    width: 90px;
                }
            }
        }
    }
</style>
<style lang="scss" scoped>
    @import "./../../../styles/layout/color_variables";

    #student-manage{
        width: 1200px;
        margin: 20px auto;
        color: #727272;
        .class-mange-search{
            height: 32px;
            .button-style{
                margin-left: 15px;
            }
        }
        .el-form-item{
            margin-right: 20px;
        }
        //elcel导入
        .dialog-excel{
            .excel-btn-box{
                text-align: center;
                margin-top: 15px;
                height: 32px;
                line-height: 32px;
                .button-style{
                    position: relative;
                    width: 110px;
                    margin-right: 20px;
                    &:hover{
                        span{
                            color: $white;
                        }
                    }
                    #excel-file{
                        position: absolute;
                        width: 100%;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        background:#cc281a;
                        opacity: 0;
                    }
                }
                span{
                    color: #1277eb;
                    cursor: pointer;
                    i{
                        vertical-align: text-top;
                        margin-left: 5px;
                    }
                }
            }
            P{
                margin-top: 25px;
                text-align: center;
                font-size: 14px;
                color: $title-gray;
                i{
                    font-size: 18px;
                    color: #385899;
                    margin-left: 10px;
                }
            }
        }
         //历史导入提示
        .dialog-history-tips{
            .el-dialog__body{
                padding: 45px 60px 15px;
            }
            .dialog-content{
                p{
                    line-height: 28px;
                    span{
                        color: #385899;
                    }
                }
                .content-box{
                    max-height: 200px;
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        width: 4px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c0c0c0;
                    }
                }
                .content-notation{
                    margin-top: 30px;
                    font-size: 12px;
                    line-height: 20px;
                    color: #1277eb;
                    padding-left: 20%;
                    .el-radio{
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }
    .button-style{
        width: 90px;
    }
</style>
